<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 引入重置样式 -->
    <link rel="stylesheet" href="../css/reset.css">
    <!-- 引入常态化样式表 -->
    <link rel="stylesheet" href="../css/normalize.css">
    <!-- 引入公共样式 -->
    <link rel="stylesheet" href="../css/common.css">
    <!-- 头部和尾部的模板样式 -->
    <link rel="stylesheet" href="../css/base.css">
    <!-- 引入当前样式 -->
    <link rel="stylesheet" href="../css/api-index.css">
</head>

<body>
    <!-- 头部 -->
    <header>
        <div class="container flex-center">
            <a href="#">
                <h1></h1>
            </a>
            <ul class="flex-b">
                <li><a href="./index.html">首页</a></li>
                <li class="on"><a href="./api-index.html">API</a></li>
                <li><a href="./api-detail.html">云服务</a></li>
                <li><a href="./customer.html">案例</a></li>
                <li><a href="./customer-detail.html">开发者</a></li>
            </ul>
            <div>
                <span onclick="location.href='./login.html';">登录</span>
                <span onclick="location.href='./regist.html';">注册有礼</span>
            </div>
        </div>
    </header>

    <!-- 主体 -->
    <main>
        <!-- API分类 -->
        <section class="APICatch">
            <div class="container">
                <h2>API分类</h2>
                <ul>
                </ul>
                <div>
                    <strong>全部</strong>
                    <input type="search" placeholder="身份证实名">
                </div>
            </div>
        </section>

        <!-- 卡片 -->
        <section class="APICards">
            <div class="container">
                <ul>
                </ul>
            </div>
        </section>
        <!-- 分页器 -->
        <section id="pagination">
            <ul>
                <li class="active">1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
                <li>5</li>
                <li>6</li>
                <li>7</li>
                <li>8</li>
            </ul>
        </section>
    </main>
    <!--蒙层 -->
    <div id="mask">
        <!-- 登录框 -->
        <div id="loginModal">
            <!-- logo -->
            <div class="loginModalLogo"></div>
            <!-- tab -->
            <div class="loginModalTab">
                <a class="active" href="javascript:void 0">账号登录</a>
                <i></i>
                <a href="javascript:void 0">扫码登录</a>
            </div>
            <div class="loginVision">
                <!-- 1表单区 -->
                <form action="index.html">
                    <!-- 用户名 -->
                    <p class="loginUser">
                        <i></i>
                        <input type="text" placeholder="用户名/手机号/邮箱">
                    </p>
                    <!-- 密码 -->
                    <p class="loginPwd">
                        <i></i>
                        <input type="password" placeholder="密码">
                    </p>
                    <!-- 忘记密码 -->
                    <p class="forgetPwd">
                        <a href="#">忘记密码</a>
                    </p>
                    <!-- 登录 -->
                    <p>
                        <input type="submit" value="登录">
                    </p>
                    <!-- 立即注册 -->
                    <p class="text-r">还没有账号,<a href="#">立即注册 <span>&gt;</span></a></p>
                </form>
                <!--2扫码登录  -->
                <form class="loginScan">
                    <p>
                        <img src="../imgs/showqrcode.jpg" alt="">
                        <span>微信扫码登录</span>
                        <span>未关注源码科技公众号,请先关注后再登录</span>
                    </p>
                    <!-- 立即注册 -->
                    <p class="text-r">还没有账号,<a href="#">立即注册 <span>&gt;</span></a></p>
                </form>
            </div>
        </div>
    </div>
    <!-- 尾部 -->
    <footer>
        <div class="container fTop flex-b">
            <!-- left -->
            <div class="fLt">
                <!-- 1 -->
                <div>
                    <h3>联系与支持</h3>
                    <ul>
                        <li>400-882-7715</li>
                        <li>售前咨询</li>
                        <li>客服&售后</li>
                        <li>常见问题</li>
                        <li>极速工单</li>
                        <li>投诉与建议</li>
                    </ul>
                </div>
                <!-- 2 -->
                <div>
                    <h3>联系与支持</h3>
                    <ul>
                        <li>400-882-7715</li>
                        <li>售前咨询</li>
                        <li>客服&售后</li>
                        <li>常见问题</li>
                        <li>极速工单</li>
                        <li>投诉与建议</li>
                    </ul>
                </div>
                <!-- 3 -->
                <div>
                    <h3>联系与支持</h3>
                    <ul>
                        <li>400-882-7715</li>
                        <li>售前咨询</li>
                        <li>客服&售后</li>
                        <li>常见问题</li>
                        <li>极速工单</li>
                        <li>投诉与建议</li>
                    </ul>
                </div>
                <!-- 4 -->
                <div>
                    <h3>联系与支持</h3>
                    <ul>
                        <li>400-882-7715</li>
                        <li>售前咨询</li>
                        <li>客服&售后</li>
                        <li>常见问题</li>
                        <li>极速工单</li>
                        <li>投诉与建议</li>
                    </ul>
                </div>
                <!-- 5 -->
                <div>
                    <h3>联系与支持</h3>
                    <ul>
                        <li>400-882-7715</li>
                        <li>售前咨询</li>
                        <li>客服&售后</li>
                        <li>常见问题</li>
                        <li>极速工单</li>
                        <li>投诉与建议</li>
                    </ul>
                </div>
            </div>
            <!-- right -->
            <div class="fRt">
                <h3>微信公众号</h3>
                <p>源码时代</p>
                <img src="../imgs/wechat-white.png" alt="">
            </div>
        </div>
        <!-- 最下面 -->
        <div class="fBm">
            <div class="container  flex-b">
                <p>
                    <img src="../imgs/bei2.png" alt="">
                    <img src="../imgs/bei1.png" alt="">
                    <span>增值电信业务经营许可证：蜀B2-20180596蜀ICP备15006450号-3营业执照</span>
                </p>
                <p>
                    <span>源码大数据股份有限公司©版权所有</span>
                    <!-- 定位在浏览器端 -->
                    <b></b>
                </p>
            </div>
        </div>
    </footer>


    <!-- util.js -->
    <script src="../js/util.js"></script>
    <!-- 本页面js -->
    <script src="../js/api-index.js"></script>
</body>

</html>